<template>
  <div class="login-wrap">
    <div class="chart-row">
      <div class="chart-card" ref="chartsDom"></div>
      <div class="chart-card" ref="chartsDom1"></div>
    </div>
    <div class="chart-row">
      <div class="analysis-card">
        <h3 class="card-title">统计分析</h3>
        <div class="analysis-content">
          <span>这里可以随便写点啥统计分析，这个是打通了的版本</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as api from '../../api/interface'
import * as echarts from 'echarts';

export default {
  data() {
    return {
      logining: false,
      ruleForm: {
        userAccount: '',
        userPassword: ''
      },
      user: {},
      rules: {
        userAccount: [{ required: true, message: '请输入账号', trigger: 'blur' }],
        userName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        sex: [{ required: true, message: '请选择性别', trigger: 'blur' }],
        age: [{ required: true, message: '请输入年龄', trigger: 'blur' }],
        phoneNumber: [{ required: true, message: '请输入电话号码', trigger: 'blur' }],
      },
      scaleList: ["小型店铺", "中型店铺", "大型店铺"],
      scaleDataList: [100, 120, 140],
      scalePie: [
        { value: 300, name: '小型店铺' },
        { value: 500, name: '中型店铺' },
        { value: 200, name: '大型店铺' }
      ]
    };
  },
  mounted() {
    api.statistic({}).then(res => {
      if (res.message != "success") {
        this.$message.error(res.message);
      } else {
        this.scaleList = res.returnObj.scaleList;
        this.scaleDataList = res.returnObj.scaleDataList;
        this.scalePie = res.returnObj.scalePie;

        // 定义通用颜色
        const colors = ['#5470c6', '#91cc75', '#fac858'];

        // 饼图配置
        let myChart = echarts.init(this.$refs.chartsDom);
        myChart.setOption({
          backgroundColor: '#fff',
          title: {
            text: '店铺规模分布',
            left: 'center',
            textStyle: {
              color: '#333',
              fontSize: 16,
              fontWeight: 'normal'
            }
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            right: 10,
            top: 'center',
            textStyle: {
              color: '#333'
            }
          },
          series: [{
            name: '店铺规模',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: true,
              formatter: '{b}: {c} ({d}%)'
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            data: this.scalePie
          }],
          color: colors
        });

        // 柱状图配置
        let myChart1 = echarts.init(this.$refs.chartsDom1);
        myChart1.setOption({
          backgroundColor: '#fff',
          title: {
            text: '店铺规模分布TOP5',
            left: 'center',
            textStyle: {
              color: '#333',
              fontSize: 16,
              fontWeight: 'normal'
            }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: this.scaleList,
            axisLabel: {
              rotate: 45,
              color: '#666'
            },
            axisLine: {
              lineStyle: {
                color: '#ddd'
              }
            }
          },
          yAxis: {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#ddd'
              }
            },
            splitLine: {
              lineStyle: {
                color: '#eee'
              }
            }
          },
          series: [{
            name: '店铺数量',
            type: 'bar',
            barWidth: '60%',
            data: this.scaleDataList,
            itemStyle: {
              borderRadius: [5, 5, 0, 0]
            }
          }],
          color: colors
        });

        // 监听窗口大小变化
        window.addEventListener('resize', () => {
          myChart.resize();
          myChart1.resize();
        });
      }
    });
  },
  methods: {
    submitForm(formName) {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.logining = true;
          api.updateUser(this.ruleForm).then(data => {
            this.logining = false;
            if (data.message != "success") {
              this.$message.error(data.message);
            } else {
              this.$message.success("修改成功");
              this.$router.go(-1);
            }
          }).catch((error, status) => {
            this.logining = false;
          });
        } else {
          this.$message.error('请输入用户名密码！');
          this.logining = false;
          return false;
        }
      });
    },
  }
}
</script>

<style scoped>
.login-wrap {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 20px;
  background-color: #f0f2f5;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.chart-row {
  display: flex;
  gap: 20px;
  width: 100%;
}

.chart-card {
  flex: 1;
  height: 400px;
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03),
  0 1px 6px -1px rgba(0, 0, 0, 0.02),
  0 2px 4px 0 rgba(0, 0, 0, 0.02);
  transition: all 0.3s ease;
}

.analysis-card {
  flex: 1;
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03),
  0 1px 6px -1px rgba(0, 0, 0, 0.02),
  0 2px 4px 0 rgba(0, 0, 0, 0.02);
  transition: all 0.3s ease;
}

.chart-card:hover,
.analysis-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.card-title {
  margin: 0 0 16px;
  color: #333;
  font-size: 16px;
  font-weight: 500;
}

.analysis-content {
  color: #666;
  line-height: 1.5;
}

/* 响应式布局 */
@media screen and (max-width: 1200px) {
  .chart-row {
    flex-direction: column;
  }

  .chart-card,
  .analysis-card {
    width: 100%;
  }
}
</style>
